<template>
    <a-modal
        v-model:visible="showModal"
        :title="title"
        :width="1200"
        :destroyOnClose="true"
        :maskClosable="false"
        :confirmLoading="loading"
        @ok="onSubmit"
        @cancel="handleCancle"
        class="material"
    >
        <div class="material-box">
            <a-layout style="height: 100%">
                <a-layout-header style="padding: 0; height: auto; background: #fff">
                    <a-tabs v-model:activeKey="activeKey" style="text-align: center">
                        <a-tab-pane key="1" tab="平台图片"></a-tab-pane>
                        <a-tab-pane key="2" tab="我的图库" force-render></a-tab-pane> </a-tabs
                ></a-layout-header>
                <a-layout>
                    <a-layout-sider style="background: #fff; border-right: 1px solid #f0f0f0">
                        <a-menu
                            style="max-height: 530px; overflow-x: scroll; padding-right: 3px"
                            mode="inline"
                            v-model:selectedKeys="current"
                        >
                            <a-menu-item :key="item" style="display: flex; justify-content: space-between" v-for="item in 30">
                                <div><FolderOpenOutlined /> <span>111</span></div>

                                <span>15</span>
                            </a-menu-item>
                        </a-menu>
                        <div class="addClass"><FolderAddOutlined />新建分类</div>
                    </a-layout-sider>
                    <a-layout-content style="padding: 0; background: #fff">
                        <div class="material-constent">
                            <div class="material-search">
                                <a-input-search
                                    v-model:value="value"
                                    placeholder="input search text"
                                    enter-button
                                    size="large"
                                    @search="onSearch"
                                />
                            </div>
                            <a-row :gutter="16" style="max-height: 420px; overflow: auto">
                                <a-col :span="3" v-for="item in 40" :key="item">
                                    <div class="gutter-box">
                                        <div class="gutter-img">
                                            <div class="gutter-icon"><CheckCircleOutlined /></div>

                                            <a-image
                                                src="https://www.antdv.com/#error"
                                                fallback=""
                                            />
                                        </div>

                                        <span class="imgName">图片名称</span>
                                    </div>
                                </a-col>
                            </a-row>
                        </div>
                    </a-layout-content>
                </a-layout>
            </a-layout>
        </div>
    </a-modal>
</template>
<script lang="ts">
import { computed, defineComponent, reactive, ref, watch } from 'vue';
import { useI18n } from 'vue-i18n';
import _ from 'lodash';
import ylTreeselectVue from '@/components/ylTreeselect.vue';
import { CheckCircleOutlined, FolderOpenOutlined, FolderAddOutlined } from '@ant-design/icons-vue';

export default defineComponent({
    name: 'roleModel',
    components: {
        ylTreeselectVue,
        CheckCircleOutlined,
        FolderOpenOutlined,
        FolderAddOutlined,
    },
    props: {
        visible: {
            type: Boolean,
            default: () => false,
        },

        title: {
            type: String,
        },
        loading: {
            type: Boolean,
            default: () => false,
        },
        dept: {
            type: Object,
        },
    },
    emits: ['submit', 'cancle'],
    setup(props, { emit }) {
        const { t } = useI18n();
        const current = ref<string[]>([1]);
        const showModal = computed(() => props.visible);
        const country = ref<any>([]);

        const formState = reactive({
            img: '',
        });

        // 编辑时赋值
        watch(
            () => props.dept,
            (dept) => {
                console.log(dept);
            }
        );

        // 提交
        const onSubmit = () => {
            emit('submit', formState);
        };
        // 取消
        const handleCancle = () => {
            return emit('cancle');
        };

        return {
            showModal,
            formState,
            t,
            activeKey: ref('1'),
            onSubmit,
            handleCancle,
            country,
            current,
        };
    },
});
</script>
<style lang="scss">
.material {
    .material-box {
        height: 600px;
        .ant-tabs-bar {
            margin: 0;
        }
        .addClass {
            position: absolute;
            cursor: pointer;
            bottom: 5px;
            left: 15px;
            .anticon {
                font-size: 16px;
                color: #333;
                padding: 0 5px;
            }
        }
    }
    .ant-modal-body {
        padding: 0 !important;
    }
}
.material-constent {
    padding: 30px 45px;
    .material-search {
        position: relative;
        margin-bottom: 15px;
        .ant-input-search {
            display: block;
            width: 300px;
            margin: 0px auto;
        }
        .ant-input {
            border-radius: 50px 0 0px 50px;
            z-index: 9;
        }
        .ant-input-group-addon {
            border-radius: 50px !important;
            background: #ff6702;
            left: -15px;
            top: -1px;
            z-index: 999;
        }
        .ant-btn {
            border-radius: 50px !important;
            background: #ff6702;
            border: none;
            z-index: 999;
        }
    }
    .gutter-box {
        margin-top: 15px;

        .imgName {
            display: block;
            text-align: center;
            width: 100%;
            padding-top: 5px;
        }
        .gutter-img {
            position: relative;

            .ant-image {
                cursor: pointer;
            }
            .gutter-icon {
                position: absolute;
                height: 100%;
                width: 100%;
                background: #737373;
                top: 0;
                left: 0;
                z-index: 99;
                font-size: 30px;
                align-items: center;
                justify-content: center;

                display: flex;
                .anticon {
                    color: #fff;
                }
            }
        }
    }
}
</style>
